<template>
    <svg aria-hidden="true" class="svg-icon-spin">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>

<script lang="ts" setup>
const props = defineProps({
    // 与vite-plugin-svg-icons'插件symbolId一致（无需单独赋值 默认即可）
    prefix: {
        type: String,
        default: 'icon'
    },
    name: {
        type: String,
        required: true
    },
    color: {
        type: String
    },
    //svg大小 带单位（以防自适应单位为rem）
    size: {
        type: String,
        default: '32px'
    }
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);

const fontSize = reactive({ default: props.size });
</script>
<style lang="scss" scoped>
.svg-icon-spin {
    width: v-bind('fontSize.default');
    height: v-bind('fontSize.default');
    fill: v-bind(color);
    vertical-align: middle;
    color: v-bind(color);
    stroke: v-bind(color);
}
</style>
